<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/Welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>系统信息</el-breadcrumb-item>
    </el-breadcrumb>
        <!-- 图表大卡片 -->
   
    <el-card :body-style="{ height: '150px' }" >

     <el-row :gutter="20">
      <el-col :span="12">
               操作系统信息
      <el-table :data="systemInfo" style="width: 100%">
      <el-table-column align="center" prop="systemName" label="操作系统名称" width="180"></el-table-column>
      <el-table-column align="center" prop="systemFramework" label="操作系统架构" width="180"> </el-table-column>
      <el-table-column align="center" prop="systemVersion" label="操作系统版本"> </el-table-column>
    </el-table>
      </el-col>
      <el-col :span="12">  
                JDK信息
      <el-table :data="systemInfo" style="width: 100%">
      <el-table-column align="center" prop="javaVersion" label="JDK版本" width="180"></el-table-column>
      <el-table-column align="center" prop="javaCompany" label="厂商" width="180"> </el-table-column>
      <el-table-column align="center" prop="jdkInstallAddr" label="JDK安装路径"> </el-table-column>
    </el-table>
      </el-col>
    </el-row>
    </el-card>
     <!-- 三个图表卡片 -->
    <el-row :gutter="100">
      <el-col :span="8">
        <el-card class="middleCard">
            JVM运行信息
            <el-row :gutter="100">
                <el-col :span="24">
                    <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="jvmstartTime" label="系统启动时间" style="width: 70%"></el-table-column>
                    <el-table-column align="center" prop="jvmholdTime" label="系统运行时长" style="width: 30%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
                 <el-row :gutter="100">
                <el-col :span="24">
                    <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="compilationName" label="编译器名称" style="width: 70%"></el-table-column>
                    <el-table-column align="center" prop="compilationTime" label="编译时长" style="width: 30%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="middleCard">
                      JVM内存信息
            <el-row :gutter="100">
                <el-col :span="24">
                    <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="jvmalreadyDistribution" label="已分配内存" style="width: 50%"></el-table-column>
                    <el-table-column align="center" prop="jvmalreadyDistributionFree" label="已分配剩余内存" style="width: 50%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
                 <el-row :gutter="100">
                <el-col :span="24">
                  <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="jvmmaxMemory" label="最大内存" style="width: 50%"></el-table-column>
                    <el-table-column align="center" prop="jvmmaxFree" label="剩余最大可用" style="width: 50%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card class="middleCard">
                        系统内存信息
            <el-row :gutter="100">
                <el-col :span="24">
                    <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="totalMemory" label="系统总内存" style="width: 50%"></el-table-column>
                    <el-table-column align="center" prop="freeMemory" label="系统可使用" style="width: 50%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
                 <el-row :gutter="100">
                <el-col :span="24">
                  <el-table :data="systemInfo" style="width: 100%">
                    <el-table-column align="center" prop="userdRatio" label="系统内存已使用占比" style="width: 100%"></el-table-column>
                    </el-table>
                </el-col>
            </el-row>
        </el-card>
      </el-col>
    </el-row>
    <!-- 四个小卡片 -->
    <el-row :gutter="100">
      <el-col :span="24">
        <el-card shadow="hover" class="smallCard">
            <el-table :data="memoryInfo" style="width: 100%">
                    <el-table-column align="center" prop="heapName" label="内存模型" style="width: 100%"></el-table-column>
                    <el-table-column align="center" prop="memoryName" label="内存空间名称" style="width: 100%"></el-table-column>
                    <el-table-column align="center" prop="init" label="Space.init(初始化)" style="width: 100%"></el-table-column>
                    <el-table-column align="center" prop="used" label="Space.used(已使用)" style="width: 100%"></el-table-column>
                    <el-table-column align="center" prop="committed" label="Space.committed(可使用)" style="width: 100%"></el-table-column>
                    <el-table-column align="center" prop="max" label="Space.max(最大)" style="width: 100%"></el-table-column>
            </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

    data () {
        return {
            systemInfo: [],
            memoryInfo: []
        }
    },
    created () {
        this.getInfo()
    },
    methods: {
      getInfo () {
          this.$api.index.getSystemInfo().then(res => {
              this.systemInfo.push(res.data)
              this.memoryInfo = res.data.list
              console.log(res)
          })
      }
    }
    
}
</script>
<style lang="less" scoped>
.el-table {
    padding-top: 10px;
}
.el-card {
  margin-top: 30px;
}
.smallCard {
  height: 400px;
}
.middleCard {
  height: 300px;
}
.el-steps {
  padding-top: 120px;
  padding-left: 300px;
}
</style>